<template>
  <div>
    <h1>首页</h1>
    <ul>
      <li>
        <router-link :to="{ path: '/shouye/navone' }">导航一</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/shouye/navtwo' }">导航二</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/shouye/navthree' }">导航三</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  //由于keep-alive缓存路由组件包裹router-view是组件的激活与失活（显示与隐藏）不是重建与销毁，created和mounted只执行一次，否则创建多少次执行多少次
  created() {
    console.log("created");
  },
  mounted() {
    console.log("mounted");
  },
  // 被keep-alive缓存组件激活时触发
  activated() {
    console.log("这是activated");
  },
  // 被keep-alive缓存组件失活时触发
  deactivated() {
    console.log("这是deactivated");
  },
};
</script>

<style lang="scss" scoped>
</style>